<?php if (!defined('__ACCESS__')) exit; ?> 
<script type="text/javascript" src="<?php $this->path('js/jquery.validate.min.js');?>"></script>
		<section id="main" class="login entire_width">
			<div class="container_12">      
				<div id="content">
					<div class="grid_12">
						<h1 class="page_title">Create an Account</h1>
					</div><!-- .grid_12 -->
				
					<div class="grid_6 " style="width:85%;margin-left:80px;">
						<form id="registerf" class="registed" action="?module=register" method="post" autocomplete="off">
    						<h2>New Customer?</h2>
							<p>By creating an account with our store, you will be able to move through the checkout process faster, store multiple shipping addresses, view and track your orders in your account and more.</p>
    						<?php if (isset($fetch)){ if (strlen($this->message) == 0) { ?>
    						<div class="response-msg error ui-corner-all">
    							<span>Registration Failed</span>
    							<?php echo $this->error; ?>
    						</div>					
    						<?php }else { ?>
    						<div class="response-msg info ui-corner-all">
    							<span>Registration Successful</span>
    							<?php echo $this->message; ?>
    						</div>					
    						<?php }} ?>	
							<div class="container_12"> 
    							<div class="grid_6">
            						<div class="username">
        								<strong>Username:</strong><sup class="surely">*</sup><br>
        								<input type="text" name="username" class="" value="" placeholder="Username...">
        							</div><!-- .usename -->
        							
        							<div class="password">
            							<strong>Password:</strong><sup class="surely">*</sup><br>
            							<input id="pass" type="password" name="password" class="" value="" placeholder="Password...">
        							</div><!-- .password -->
        							
        							<div class="password">
            							<strong>Confirm Password:</strong><br>
            							<input type="password" name="conpassword" class="" value="" placeholder="Confirm Password...">
        							</div><!-- .password -->
    							</div>	
    							
    							<div class="grid_6">
            						<div class="firstname">
        								<strong>First Name:</strong><sup class="surely">*</sup><br>
        								<input type="text" name="firstname" class="" value="" style="width:70%" placeholder="First Name...">
        							</div><!-- .usename -->
        							
        							<div class="lastname">
            							<strong>Last Name:</strong><sup class="surely">*</sup><br>
            							<input type="text" name="lastname" class="" value="" style="width:70%" placeholder="Last Name...">
        							</div><!-- .password -->
        							
        							<div class="email">
            							<strong>Email:</strong><sup class="surely">*</sup><br>
            							<input type="text" name="email" class="" value="" style="width:70%" placeholder="Email...">
        							</div><!-- .password -->
    							</div>	
							</div>
							<div class="submit" style="margin-right:-5px;">						
								<sup class="surely">*</sup><span>Required Field</span>			
								<div class="clear"></div>	
								<input type="submit" value="Create" style="float:right;">
							</div><!-- .submit -->
							<div class="clear"></div>	
						</form><!-- .registed -->
					</div><!-- .grid_6 -->
				</div><!-- #content -->
				<div class="clear"></div>
				</div><!-- .container_12 -->
			</section>
			<div class="clear"></div>
			<script>
			$(document).ready(function(){
			    $( "#registerf" ).validate({
                	rules: {
                		username: {
                			required: true,
                			minlength: 4
                		},
                		password: {
                			required: true,
                			minlength: 4
                		},
						conpassword: {
                			required: true,
                          	equalTo: "#pass"
                        },
                		firstname: {
                			required: true
                		},
                		lastname: {
                			required: true
                		},
                		email: {
                			required: true,
                			email: true
                		}
                	}
                });
			});
			</script>